<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>阳光智慧社区管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label">所属小区</label>
        <div class="layui-input-block">
            <select name="cname" lay-filter="cname" id="cname" lay-search="">
            </select>
        </div>
    </div>
    <!--    <div class="layui-form-item">
            <label class="layui-form-label">栋数名称</label>
            <div class="layui-input-block">
                <select name="bname" lay-filter="bname" id="bname" lay-search="">
                </select>
            </div>
        </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label required">栋数名称</label>
        <div class="layui-input-block">
            <input type="text" name="bname" id="bname" lay-verify="required" lay-reqtext="栋数名称不能为空"
                   placeholder="请输入栋数名称"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">总户数</label>
        <div class="layui-input-block">
            <input type="text" name="unitNum" id="unitNum" lay-verify="required" lay-reqtext="总户数不能为空"
                   placeholder="请输入总户数"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">单元号</label>
        <div class="layui-input-block">
            <input type="number" name="unit" id="unit" lay-verify="required" lay-reqtext="单元号不能为空"
                   placeholder="请输入单元号" min="1" max="5" step="1" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">描述</label>
        <div class="layui-input-block">
            <input type="text" name="remark" id="remark" lay-verify="" lay-reqtext="描述不能为空"
                   placeholder="请输入描述" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">创建时间</label>
        <div class="layui-input-block">
            <input type="date" name="createTime" id="createTime" lay-verify="required" lay-reqtext="创建时间不能为空"
                   placeholder="请输入“创建时间”"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../../layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 向后端发送请求，获取小区信息
        $.ajax({
            // url: "../../house/preAdd", // 相对路径的写法
            url: "/community_maven/community/queryAllCommunity", // 绝对路径的写法
            type: "post",
            data: "",
            dataType: "json",
            success: function (result) {
                // console.log(JSON.stringify(result))
                if (result.code === 0) {//成功
                    //遍历

                    var cnameOptionStr = "<option value='99'>请选择</option>";
                    $.each(result.data, function (index, item) {
                        cnameOptionStr += "<option value='" + item.cid + "'>" + item.cname + "</option>"
                    })


                    $("#cname").html(cnameOptionStr);

                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                } else {
                    layer.msg(result.msg);
                }
            }
        })

        /*$("#unit").blur(checkUnit());

        // 对单元号就行正则校验，单元号只能是1位数的阿拉伯数字
        function checkUnit() {
            var num = $("#unit").val();
            var reg = /^[0-9]*$/;//正则表达式
            if (num.length < 1 || num.length > 1 || num > 5 || num < 1) {
                layer.msg('单元号只能是整数，且范围为1~5', {icon: 5});
            } else {
                if (!reg.test(num)) {
                    layer.msg('编号只能是阿拉伯数字', {icon: 5});
                }
            }
        };*/

        // "所属小区"下拉框发生变化的时候，发送ajax，查询当前”小区“的”栋数“
        // var cid = null;
        var cname = null;
        form.on('select(cname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            cid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            //获取选中的值
            var e = data.elem;
            //获取选中的文本
            cname = e[e.selectedIndex].text;
        });

        $("#unit").blur(
            // 对单元号就行正则校验，单元号只能是1位数的阿拉伯数字
            function checkUnit() {
                var num = $("#unit").val();
                var reg = /^[0-9]*$/;//正则表达式
                if (num.length < 1 || num.length > 1 || num > 5 || num < 1) {
                    layer.msg('单元号只能是整数，且范围为1~5', {icon: 5});
                } else {
                    if (!reg.test(num)) {
                        layer.msg('编号只能是阿拉伯数字', {icon: 5});
                    }
                }
            });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            function checkUnit() {
                var num = $("#unit").val();
                var reg = /^[0-9]*$/;//正则表达式
                if (num.length < 1 || num.length > 1 || num > 5 || num < 1) {
                    layer.msg('单元号只能是整数，且范围为1~5', {icon: 5});
                } else {
                    if (!reg.test(num)) {
                        layer.msg('编号只能是阿拉伯数字', {icon: 5});
                    }
                }
            }

            checkUnit(); // 对单元号进行正则校验

            let cid = data.field.cname; // 小区号
            console.log("小区名===>" + cname);

            let bname = data.field.bname; // 栋号(由于bid，bname,unit来自于同一张表，所以当unit变化了，bname可以不变，但是bid一定发生了变化，不然插入进house表的就是错误的unit)
            console.log("栋数===>" + bname);

            var unitNum = data.field.unitNum; // 总户数
            console.log("房号===>" + unitNum);

            let unit = data.field.unit; // 单元号
            console.log("单元号===>" + unit);

            let remark = data.field.remark; // 单元号
            console.log("描述===>" + remark);

            let createTime = data.field.createTime; // 入住时间
            console.log("入住时间===>" + createTime);
            let community = {
                cid: cid,
                remark: remark
            }
            let build = {
                bname: bname,
                unitNum: unitNum,
                unit: unit,
                community: community
            };
            console.log("build===>" + JSON.stringify(build))
            $.ajax({
                type: 'post',
                url: '../../build/addBuild',
                // data: house,
                data: JSON.stringify(build),
                dataType: 'json',
                success(obj) {
                    if (obj.code === 0) {//成功
                        window.parent.location.reload();
                    } else {
                        layer.msg(obj.msg)
                    }
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }

            })

            return false;

        });


    });

</script>
</body>
</html>